<template>
	<el-form id="form-table" ref="formTable" :model="formData" :rules="rules" label-position="right" label-suffix=":" size="medium">
		<template v-if="formData.hasProp">
			<el-row>
				<form-element :colWidth="colWidth" :formItems="formData.firstItems" :model="formData" :labelWidth="labelWidth"
					@handle-change="handleChange" @handle-blur="handleBlur"></form-element>
			</el-row>
			<el-row>
				<form-element :colWidth="colWidth" :formItems="formData.secondItems" :model="formData" :labelWidth="labelWidth"
					@handle-change="handleChange" @handle-blur="handleBlur"></form-element>
				<el-col :push="(24 - colWidth - colWidth * formData.secondItems.length)" :sm="colWidth">
					<el-button class="button" type="primary" @click="handleSubmit()">保存</el-button>
				</el-col>
			</el-row>
		</template>
		<template v-else>
			<el-row>
				<el-col :push="9" :sm="6" class="table-title">
					<label>{{header}}</label>
				</el-col>
				<el-col :push="12" :sm="7" style="margin-left: 6px; padding-right: 5px;">
					<el-button class="button" type="primary" @click="handleSubmit()">保存</el-button>
				</el-col>
			</el-row>
		</template>
		<el-row>
			<el-table ref="editTable" :data="formData.list" :row-style="{height: '42px'}" border fit highlight-current-row stripe row-key="id"
				:max-height="maxHeight" @row-click="rowClick">
				<el-table-column align="center" label="序号" type="index" :width="indexWidth"></el-table-column>
				<template v-for="column in columns">
					<el-table-column :label="column.label" :prop="column.prop" :width="column.width" align="center" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="'list.' + scope.$index + '.' + column.prop" :rules="rules[column.prop]" class="form-item">
								<column-element :model="scope.row" :scope="scope" :item="column" @handle-change="handleChange" @handle-blur="handleBlur" />
							</el-form-item>
						</template>
					</el-table-column>
				</template>
				<el-table-column :width="operateWidth" align="center" column-key="operation" label="操作">
					<template v-slot="scope">
						<el-button class="sort-button" icon="el-icon-plus" size="mini" type="primary" @click="appendRow(scope.$index)"></el-button>
						<el-button class="sort-button" icon="el-icon-minus" size="mini" type="primary" @click="removeRow(scope.$index)"></el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
	</el-form>
</template>

<script>

export default {
	name: "form-table",
	props: {
		header: {
			type: String,
			default: ""
		},
		indexWidth: {
			type: String,
			default: "80px"
		},
		operateWidth: {
			type: String,
			default: "143px"
		},
		maxHeight: {
			type: String,
			default: "700px"
		},
		labelWidth: {
			type: String,
			default: "100px"
		},
		colWidth: {
			type: Number,
			default: 6
		},
		formData: {
			type: Object,
			default() {
				return {};
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			}
		},
		rules: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			timer: null
		};
	},
	updated() {
		this.$nextTick(() => {
			this.$refs.editTable.doLayout();
		});
	},
	methods: {
		handleSubmit() {
			this.$refs.formTable.validate(valid => {
				if (valid) {
					this.$emit("handle-submit");
				} else {
					this.message.error("表单数据提交错误!");
				}
			});
		},
		appendRow(rowIndex) {
			this.$emit("handle-append", rowIndex);
		},
		removeRow(rowIndex) {
			this.$emit("handle-remove", rowIndex);
		},
		handleChange(prop, row, rowIndex) {
			this.$emit("handle-change", prop, row, rowIndex);
			this.handleValidateMsg();
		},
		handleBlur(prop, row, rowIndex) {
			this.$emit("handle-blur", prop, row, rowIndex);
			this.handleValidateMsg();
		},
		rowClick(row, column, event) {
			if (column && column.columnKey !== "operation") {
				this.$emit("handle-click", row);
			}
		},
		handleValidateMsg() {
			let editTable = this.$refs.editTable.$el;
			this.timer = setTimeout(() => {
				let errorElements = editTable.querySelectorAll(".is-error");
				let successElements = editTable.querySelectorAll(".is-success");
				if (errorElements) {
					errorElements.forEach(element => element.style.marginBottom = "20px");
				}
				if (successElements) {
					successElements.forEach(element => element.style.marginBottom = "0px");
				}
			}, 300);
		}
	},
	beforeDestroy() {
		if (this.timer) {
			clearTimeout(this.timer); // 在Vue实例销毁前，清除我们的定时器
		}
	}
};
</script>

<style scoped>
#form-table >>> .el-input__inner {
	text-align: center;
}

.form-item {
	margin: 0 auto;
}

.table-title {
	font-size: 20px;
	text-align: center;
	margin: -10px auto 15px 0;
}

.button {
	width: 70%;
	margin-top: -10px;
	margin-bottom: 10px;
}
</style>
